<template>
    <div class="person">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <button @click="changeName">改全名</button>
        全名：<span>{{ fullName }}</span>
    </div>
</template>

<script setup lang="ts" name="Person">
import { computed, ref } from 'vue';

//作用：配组合式API
    //data
    let firstName = ref("zhang")
    let lastName = ref("san")


    //computed
    //只读不能改
    //  let fullName = computed(()=>{
    //     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value
    // })

    //能读能改
    let fullName = computed({
        get(){//!!!圈2：接收
            return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + "-" + lastName.value
        },
        set(val){//!!!圈3：将fullName.value作为自己的实参（val的)，解构它，在这里修改first/lastname
            const [str1,str2] = val.split("-")
            firstName.value = str1
            lastName.value = str2
        }
    })
    function changeName(){//！！！圈1:用来激活set
        fullName.value = "li-hua"
    }
</script>

<style>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px;
    }
    button {
        margin: 0 5px;
    }
    ul li {
        font-size: 20px;
    }
</style>